import Taro, { Component } from '@tarojs/taro'
import { AtNavBar, AtSearchBar, AtIcon } from 'taro-ui'
import classnames from 'classnames'
import sdk from '@/common/sdk'
import PropsType from 'prop-types'
import { View } from '@tarojs/components'
import '../styles/navbar.scss'

export default class DNavBar extends Component {

    onClickLeftIcon() {
        const { status = false } = this.props
        //  用于判断路由情况
        if (!status) {
            setTimeout(() => {
                Taro.navigateBack({ delta: 1 })
            }, 200)
            return
        } else if (status) {
            this.props.onClickLeftIcon && this.props.onClickLeftIcon()
        }
    }

    onClickRgIconSt() {
        this.props.onClickRgIconSt && this.props.onClickRgIconSt()
    }

    onChange() {
        this.props.onChange && this.props.onChange(...arguments)
    }
    onActionClick() {
        this.props.onActionClick && this.props.onActionClick()
    }

    onSearchIcon() {
        this.props.onSearchIcon && this.props.onSearchIcon()
    }

    handleRightText() {
        this.props.handleRightText && this.props.handleRightText()
    }

    render() {
        const {
            className,
            color = '#000',
            leftIconType,
            title = '车煮',
            rightFirstIconType,
            rightIconStatus,
            disabled,
            value,
            placeholder,
            showActionButton,
            actionName,
        } = this.props
        if (window.bridge) {
            const _that = this
            // window.bridge.callHandler('getWebTitle', { title }, function responseCallback(res) { })
            window.bridge.registerHandler('onClickLeftIcon', function (data, responseCallback) {
                _that.onClickLeftIcon()
            });
        }
        sdk.setTitleInfo(title)
        return (
            process.env.NODE_ENV === 'development' ? <View className={classnames('b_navbar', className)}>
                {
                    !rightIconStatus && <AtNavBar
                        className={className}
                        border={false}
                        onClickLeftIcon={this.onClickLeftIcon.bind(this)}
                        fixed={true}
                        color={color}
                        leftIconType={leftIconType}
                        title={title}
                        rightFirstIconType={rightFirstIconType}
                        onClickRgIconSt={this.onClickRgIconSt.bind(this)}
                    ></AtNavBar>
                }
                {
                    (rightFirstIconType && rightFirstIconType === 'search' && rightIconStatus) && <View className='b_navbar__search'>
                        <View className='b_navbar__search_icon' onClick={this.onSearchIcon.bind(this)}>
                            <AtIcon size='25' value='chevron-left' color='#333'></AtIcon>
                        </View>
                        <AtSearchBar
                            fixed={true}
                            disabled={disabled}
                            value={value}
                            showActionButton={showActionButton}
                            actionName={actionName}
                            placeholder={placeholder}
                            onActionClick={this.onActionClick.bind(this)}
                            onChange={this.onChange.bind(this)}>
                        </AtSearchBar>
                    </View>
                }
            </View> : ''
        )
    }
}

DNavBar.defaultProps = {
    status: false,
    className: "",
    color: '#000',
    leftIconType: "chevron-left",
    title: '首页',
    rightFirstIconType: '',
    rightIconStatus: false,
    disabled: false,
    value: '',
    showActionButton: false,
    actionName: '搜索',
    placeholder: '请输入搜索内容',
    onClickLeftIcon: () => { },
    onClickRgIconSt: () => { },
    onChange: () => { },
    onActionClick: () => { },
    onSearchIcon: () => { },
    handleRightText: () => { }
}

DNavBar.PropsType = {
    status: PropsType.bool,
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    color: PropsType.string,
    leftIconType: PropsType.string,
    title: PropsType.string,
    rightFirstIconType: PropsType.string,
    rightIconStatus: PropsType.bool,
    disabled: PropsType.bool,
    value: PropsType.string,
    showActionButton: PropsType.bool,
    actionName: PropsType.string,
    placeholder: PropsType.string,
    onClickLeftIcon: PropsType.func,
    onClickRgIconSt: PropsType.func,
    onChange: PropsType.func,
    onActionClick: PropsType.func,
    onSearchIcon: PropsType.func
}
